<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>头像修改-KuangStudy</title>
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body style="background: #f2f2f2;">

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
	<div class="row">
		<div th:replace="~{user/index::userShowPanel}"></div>
		<div class="col-md-9 blog-main">
			<div class="my-3 p-3 bg-white rounded shadow-sm" id="up">

				<p>只能上传 .jpg格式图片</p>
				<el-upload
						style="padding:20px"
						class="upload-demo"
						ref="upload"
						:before-upload="beforeUpload"
						:action="url"
						:on-preview="handlePreview"
						:on-remove="handleRemove"
						:on-success="handleSuccess"
						:on-error="handleError"
						:file-list="fileList"
						:auto-upload="false"
						:limit="1"
						accept=".jpg"
						:on-change="handleChange"
				>
					<el-button slot="trigger" type="primary">选择你的头像文件</el-button>
					<el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
				</el-upload>

			</div>
		</div>
	</div>
</main>


<div th:replace="~{common/footer::footer}"></div>
<a class="to-top">返回顶部</a>

<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>

<!-- layer 赞赏码 -->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/cs/headerIndex.js}"></script>
<script>
    let up = new Vue({
        el: "#up",
        data: {
            fileList: [],
            url: "/upload"
        },
        methods: {
            handleChange(file, fileList) {

            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file.name);
            },
            handleSuccess(res, file) {
                this.$message.success(file.name + " 上传成功！")
                this.$refs.upload.clearFiles();
                location.reload(true);
            },
            handleError(err, file) {
                // console.log(err,file)
                this.$message.error(file.name + " 上传失败！")
            },
            beforeUpload(file) {
                console.log(file);
                var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

                console.log(file);
                const extension = testmsg === "jpg";
                const isLt2M = file.size / 1024 / 1024 < 10
                if (!extension) {
                    this.$message({
                        message: "上传文件只能是 jpg!",
                        type: "warning"
                    });
                }
                if(!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    });
                }
                return (extension) && isLt2M

            }
        },
    })
</script>

</body>
</html>
